<template>
  <div class="record-btn-container" >
    <div class="recording-container" 
         @touchmove.stop.prevent="audioTouchmove"
         >
      <span :style="keyDown ? 'opacity: 1' : 'opacity: 0'" class="time">{{ formatDuration(currentDuration) }}</span>
      <div class="recording-video">
        <div v-if="keyDown" class="record-animation left-animate" :class="{ active: cancelStatus }">
          <div class="voice-scale">
            <div class="item" v-for="(_, index) in 13" :key="index"></div>
          </div>
        </div>
        <div class="middle">
          <img  
             v-show="cancelStatus == false" 
             style="width: 100%;height: 100%"
             @touchend.stop.prevent="audioTouchend" 
             @touchstart.stop.prevent="audioTouchstart"
             src="@/assets/images/record_voice.png" 
             alt=""
          >
          <img   
             v-show="cancelStatus == true" 
             style="width: 100%;height: 100%"
             src="@/assets/images/record_cancel.png" 
             alt=""
          >
        </div>
        <div v-if="keyDown" class="record-animation right-animate" :class="{ active: cancelStatus }">
          <div class="voice-scale">
            <div class="item" v-for="(_, index) in 13" :key="index"></div>
          </div>
        </div>
      </div>
      <span v-if="!keyDown" class="text-tip">按住说话</span>
      <span v-else class="text-tip">松开发送 上滑取消</span>
    </div>
  </div>
</template>
<script lang="ts" setup name="RecordButton">
import { ref } from 'vue';
import { formatDuration } from '@/utils/utils';
import useAudioRecorder from '../../../hooks/useAudioRecorder';
const recorder = useAudioRecorder();

const emit = defineEmits(['sendRecord']);

const currentDuration = ref(0);

const keyDown = ref(false) // 处于按下状态

// 语音发送，  true - 取消发送，  false - 发送
const cancelStatus = ref(false);

//记录长按录音开始点信息,用于后面计算滑动距离
let startPoint = { clientX: 0, clientY: 0 };

/**
 * 手指按下
 * @param {Object} e
 */
async function audioTouchstart(e: any) {
  e.preventDefault();
  currentDuration.value = 0
  keyDown.value = true
  startPoint.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
  console.log(startPoint.clientY, 'start');
  startRecord();
}

let recordResult: any = null;
let recorderInterval: any = null;
function startRecord() {
  recorder
    .startRecord()
    .then(() => {
      recorderInterval = setInterval(() => {
        currentDuration.value++;        
      }, 1000);
      console.log('开始录音');
    })
    .catch((e) => {
      currentDuration.value = 0;
      recorder.destroyRecord();
      console.log(e);
    });
}

function audioTouchend() {
  if(cancelStatus.value) {
    cancelRecorder()
    return
  }
  keyDown.value = false
  recorder.stopRecord();
  recordResult = recorder.getRecordFile();
  clearInterval(recorderInterval);
  recorderInterval = null;
  if (recordResult) {
    emit('sendRecord', recordResult);
  }
  recorder.destroyRecord();
}


/**
 * 手指移动
 * @param {Object} e
 */
 function audioTouchmove(e: any) {
  e.preventDefault();
  let touchData = e.touches[0]; //滑动过程中，手指滑动的坐标信息  
  let moveY = touchData.clientY - startPoint.clientY;
  if (moveY > -80) {
    // 滑动距离不够则不取消发送
    cancelStatus.value = false
  } else {
    cancelStatus.value = true
  }
}

//取消录音
function cancelRecorder() {
  keyDown.value = false
  currentDuration.value = 0
  cancelStatus.value = false
  recorder.destroyRecord();
}
</script>

<style scoped lang="scss">
.record-btn-container {
  position: relative;
  width: 100%;
  height: 100%;
  .voice-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .start-record {
      width: 76px;
      height: 76px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .voice-text{
        margin-top: 16px;
        line-height: 24px;
        font-size: 16px;
        color: rgba(51, 51, 51, 1);
      }
  }
  .recording-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    .time {
      margin-top: 12px;
      line-height: 24px;
      color: rgba(51, 51, 51, 1);
      font-size: 16px;
    }
    .recording-video {
      display: flex;
      margin: 8px 0px 12px;
      .record-animation {
        display: flex;
        align-items: center;
          .voice-scale {
            width: 85px;
            height: 33px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item {
              display: block;
              background: rgba(65, 90, 229, 1);
              width: 6px;
              height: 10%;
              border-radius: 10px;
              margin-right: 4px;

              &:last-child {
                margin-right: 0px;
              }

              &:nth-child(1) {
                animation: load 1s 0.8s infinite linear;
              }

              &:nth-child(2) {
                animation: load 1s 0.6s infinite linear;
              }

              &:nth-child(3) {
                animation: load 1s 0.4s infinite linear;
              }

              &:nth-child(4) {
                animation: load 1s 0.2s infinite linear;
              }

              &:nth-child(5) {
                animation: load 1s 0s infinite linear;
              }

              &:nth-child(6) {
                animation: load 1s 0.2s infinite linear;
              }

              &:nth-child(7) {
                animation: load 1s 0.4s infinite linear;
              }

              &:nth-child(8) {
                animation: load 1s 0.6s infinite linear;
              }

              &:nth-child(9) {
                animation: load 1s 0.8s infinite linear;
              }

              &:nth-child(10) {
                animation: load 1s 1s infinite linear;
              }
              &:nth-child(11) {
                animation: load 1s 0.9s infinite linear;
              }

              &:nth-child(12) {
                animation: load 1s 0.7s infinite linear;
              }

              &:nth-child(13) {
                animation: load 1s 0.5s infinite linear;
              }
            }
          }
      }
      @keyframes load {
        0% {
          height: 10%;
        }

        50% {
          height: 100%;
        }

        100% {
          height: 10%;
        }
      }
      .left-animate {
        margin-right: 47px;
      }
      .right-animate {
        margin-left: 47px;
      }
      .middle {
        width: 76px;
        height: 76px;
        color: #fff;
        text-align: center;
        line-height: 76px;
        border-radius: 100%;
        background: rgba(0, 0, 0, 0.6);
      }
      
    }
    .text-tip {
      line-height: 24px;
      font-size: 16px;
      color: rgba(153, 153, 153, 1);
    }
  }
}
</style>
